<script setup lang="ts">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { usePropertyDelete, usePropertyIndex } from '@fl/api/fit-old-api'
import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'fit-old-construction-unit-index',
})

const { push } = useRouter()

const { mutate: deleteMutate } = usePropertyDelete()

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

const params = computed(() => ({
    pageIndex: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
}))

const records = ref()
const { data, isLoading } = usePropertyIndex(params)
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records)
        tablePage.value.total = data.value.total!
    }
})

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

// 查看
function viewHandle(row: any) {
    push({
        path: `/fit-old/construction-unit/${row.propertyEnterpriseId}`,
    })
}

// 新增
function goToAdd() {
    push('/fit-old/construction-unit/add')
}

// 编辑
function goToEdit(row: any) {
    push(`/fit-old/construction-unit/${row?.propertyEnterpriseId}/edit`)
}

// 删除
function deleteHandle(row: any) {
    deleteMutate(row.propertyEnterpriseId, {
        onSuccess: () => {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
        },
    })
}

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'propertyEnterpriseName', title: '物业单位' },
        { slots: { default: 'operate' }, title: '操作', width: 250 },
    ],
})
</script>

<template>
    <ElCard shadow="never">
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="records"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="goToAdd"
                >
                    <div class="i-ic:baseline-add size-16" />
                    新增
                </ElButton>
            </template>

            <template #operate="{ row }">
                <el-space>
                    <el-button type="info"
                               text
                               @click="viewHandle(row)"
                    >
                        查看
                    </el-button>

                    <el-button type="primary"
                               text
                               @click="goToEdit(row)"
                    >
                        编辑
                    </el-button>

                    <el-popconfirm title="要删除吗？"
                                   @confirm="deleteHandle(row)"
                    >
                        <template #reference>
                            <el-button text
                                       type="warning"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </el-space>
            </template>
        </SearchTable>
    </ElCard>
</template>
